<template>
  <div class="recommend_center">
    <!-- 聊天室 推荐 -->
    <div class="recommend_container">
      <!-- 标签导航 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="咨询" name="first">
          <!-- 搜索 -->
          <el-input
            v-model="consultCategory"
            placeholder="搜索"
            prefix-icon="el-icon-search"
          ></el-input>
          <el-tree
            class="filter-tree"
            :data="consultTypeList"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :highlight-current="true"
            :check-on-click-node="true"
            @node-click="consultClick"
            ref="consultTree"
          >
            <span slot-scope="{ node, data }">
              <span class="tree-add" :class="data.children ? '' : 'is-leaf'"
                ><svg-icon
                  :icon-class="
                    data.children && data.children.length != 0
                      ? 'add-icon'
                      : 'minus-icon'
                  "
              /></span>
              <span class="tree-minus" :class="data.children ? '' : 'is-leaf'"
                ><svg-icon icon-class="minus-icon"
              /></span>
              <span class="categoryName">{{ node.label }}</span>
            </span>
          </el-tree>
        </el-tab-pane>
        <!-- <el-tab-pane label="项目" name="second">

          <el-input
            v-model="projectCategory"
            placeholder="搜索"
            prefix-icon="el-icon-search"
          ></el-input>
          <el-tree
            class="filter-tree"
            :data="projectTypeList"
            :props="defaultProps"
            :highlight-current="true"
            :filter-node-method="filterNode"
            :check-on-click-node="true"
            @node-click="projectClick"
            ref="projectTree"
          >
            <span slot-scope="{ node, data }">
              <span class="tree-add" :class="data.children ? '' : 'is-leaf'"
                ><svg-icon
                  :icon-class="
                    data.children && data.children.length != 0
                      ? 'add-icon'
                      : 'minus-icon'
                  "
              /></span>
              <span class="tree-minus" :class="data.children ? '' : 'is-leaf'"
                ><svg-icon icon-class="minus-icon"
              /></span>
              <span class="categoryName">{{ node.label }}</span>
            </span>
          </el-tree>
        </el-tab-pane> -->
        <el-tab-pane label="工具" name="three">
          <!-- 搜索 -->
          <el-input
            v-model="projectCategory"
            placeholder="搜索"
            prefix-icon="el-icon-search"
          ></el-input>
          <div class="tool">
            <ul>
              <li
                v-for="(item, index) in toolList"
                :key="index"
                @click="toolClick(item)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 选中按钮 -->
    <div class="selectCategory">
      <div class="textCategory">
        <span>已选：</span><span>{{ selectName }}</span>
      </div>
      <el-button round class="selectBtn" @click="interLinkage">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getFindConsultTypeListApi } from "@/BMViews/api/work/consult.js";
import { getFindProjectTypelistApi } from "@/wss/newApi_3-24/work/projectType.js";
export default {
  name: "ChatRecommend",
  data() {
    return {
      showtoolClick: false,
      activeName: "first",
      //   咨询项目数组
      consultTypeList: [],
      projectTypeList: [],
      toolList: [
        { name: "合同智审", id: "review", type: "1" },
        { name: "秒贷", id: "Loans", type: "1" },
        { name: "合同模板", id: "contract", type: "1" },
        { name: "智慧文控", id: "IntelligentControl", type: "1" },
        { name: "阿米巴预算", id: "budget", type: "1" },
      ],
      // 关键字搜索
      projectCategory: "",
      consultCategory: "",
      //   选中的内容
      selectName: "",
      selectObj: {},
      //   数据
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {},
  mounted() {
    this.getConsultTypeListFn();
    this.getProjectTypeListFn();
  },
  methods: {
    // 获取咨询类型
    async getConsultTypeListFn() {
      let { code, rows } = await getFindConsultTypeListApi();
      if (code != 200) return;
      this.consultTypeList = JSON.parse(JSON.stringify(rows));
    },
    // 获取项目类型
    async getProjectTypeListFn() {
      let { code, rows } = await getFindProjectTypelistApi();
      if (code != 200) return;
      let projectType = rows.filter(item=>{
        return item.id != '2000000000000000000'
      })
      this.projectTypeList = JSON.parse(JSON.stringify(projectType));
    },
    // 筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 咨询
    consultClick(val) {
      // console.log(val, "33333333333333333333");
      this.selectName = val.name;
      this.selectObj = val;
    },
    // 项目
    projectClick(val) {
      this.selectName = val.name;
      this.selectObj = val;
    },
    // 工具
    toolClick(val) {
      this.selectName = val.name;
      this.selectObj = val;
      this.showtoolClick = true;
    },
    // 点击确定生成链接
    interLinkage() {
      let href = window.location.host; //获取当前域名 不带http://
      let type;
      if (this.activeName == "first") {
        type = "Bm-Consult";
      } else if (this.activeName == "second") {
        type = "Bm-project";
      } else {
        type = "Bm-tool";
      }
      //   pid 是当前点击项的父id
      let oneId = "";
      let oneName = "";
      let twoId = "";
      let twoName = "";
      let threeId = "";
      let threeName = "";
      if (this.selectObj.type == "1") {
        oneId = this.selectObj.id;
        oneName = this.selectObj.name;
        if(oneId == 'IntelligentControl'){
          type = "Bm-contract";
        }
      } else if (this.selectObj.type == "2") {
        oneId = this.selectObj.pid;
        twoId = this.selectObj.id;
        twoName = this.selectObj.name;
        // 拿着父亲的id去匹配名称
        if (type == "Bm-Consult") {
          this.consultTypeList.forEach((item) => {
            if (item.id == oneId) {
              oneName = item.name;
            }
          });
        } else {
          this.projectTypeList.forEach((item) => {
            if (item.id == oneId) {
              oneName = item.name;
            }
          });
        }
      } else {
        twoId = this.selectObj.pid;
        threeId = this.selectObj.id;
        threeName = this.selectObj.name;
        if (type == "Bm-Consult") {
          this.consultTypeList.forEach((item) => {
            item.children.forEach((k) => {
              if (k.id == twoId) {
                oneId = k.pid;
                oneName = item.name;
                twoName = k.name;
              }
            });
          });
        } else {
          this.projectTypeList.forEach((item) => {
            item.children.forEach((k) => {
              if (k.id == twoId) {
                oneId = k.pid;
                oneName = item.name;
                twoName = k.name;
              }
            });
          });
        }
      }
      // console.log(oneId, twoId, threeId, "hhhhhhhhhhhhhhhhh这是id");
      //http://${域名}/${Bm-Consult或者Bm-project}/${一级id}?typeId=${二级id},${三级id}
      let link = "";
      if (this.selectObj.type == "1") {
        link = `http://${href}/${type}/${oneId}`;
      } else if (this.selectObj.type == "2") {
        link = `http://${href}/${type}/${oneId}?typeId=${twoId}`;
      } else {
        link = `http://${href}/${type}/${oneId}?typeId=${twoId},${threeId}`;
      }
      // console.log(oneName, twoName, threeName, "链接");
      this.$bus.$emit("Link", link, oneName, twoName, threeName);
    },
  },

  watch: {
    consultCategory(val) {
      this.$refs.consultTree.filter(val);
    },
    projectCategory(val) {
      this.$refs.projectTree.filter(val);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}
.recommend_center {
  margin: 0 16px;
  height: 100%;
  padding-bottom: 80px;
}
.recommend_center .recommend_container {
  height: 100%;
}
.recommend_center .recommend_container .el-tabs {
  height: 100%;
}
.recommend_center .recommend_container .el-tabs >>> .el-tabs__content {
  height: calc(100% - 60px);
}
.recommend_center
  .recommend_container
  .el-tabs
  >>> .el-tabs__content
  .el-tab-pane {
  overflow-y: auto;
}
/* 按钮 */
.selectCategory {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 30px;
  border-top: 1px solid #ecedf0;
  z-index: 99998;
  background-color: #fff;
}
.selectCategory .textCategory {
  font-size: 14px;
  color: #606e84;
  line-height: 32px;
  font-weight: 600;
}
.selectCategory .el-button {
  text-align: center;
  font-size: 12px;
  color: #fff;
  box-sizing: border-box;
  border: none;
  background-color: #f87a23;
}
/* 咨询 项目 */
::v-deep .el-tree {
  /* height: 100%; */
  padding-top: 10px;
  margin-bottom: 60px;
  /* overflow: scroll; */
}
::v-deep .el-tree::-webkit-scrollbar {
  width: 0px;
}
::v-deep .el-tree .is-expanded {
  position: relative;
}
::v-deep .el-tree .is-expanded::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 8px;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
}
::v-deep .el-tree .tree-add,
::v-deep .el-tree .tree-minus {
  position: relative;
  margin-right: 7px;
  background-color: #fff;
  z-index: 1;
  font-size: 14px;
}
::v-deep .categoryName {
  font-size: 14px;
}
::v-deep .el-tree .el-tree-node {
  border-bottom: 1px solid #f5f5f5;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node:last-child {
  border-bottom: 0;
}
::v-deep .el-tree .el-tree-node__children .tree-add.is-leaf,
::v-deep .el-tree .el-tree-node__children .tree-minus.is-leaf {
  opacity: 0;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-add,
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-minus {
  opacity: 0;
  margin-right: 0;
}
::v-deep
  .el-tree
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content {
  padding-left: 43px !important;
}
::v-deep .el-tree .tree-minus {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-add {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-minus {
  display: inline-block;
}

::v-deep .el-tree .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0;
}
::v-deep .el-tree .is-expanded .is-expanded::before {
  left: 25px;
}
::v-deep .el-tree .el-tree-node__content {
  height: 36px;
}
::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background: rgba(248, 122, 35, 0.06);
  color: #f87a23;
}
::v-deep .el-tree .el-icon-caret-right:before {
  display: none;
}
::v-deep .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
::v-deep .el-tree .el-icon-caret-right.is-leaf {
  opacity: 0;
}

/* 工具 */
.tool {
  font-size: 14px;
}
.tool ul {
  margin-top: 10px;
}
.tool li {
  border-bottom: 1px solid #f5f5f5;
  line-height: 38px;
  padding: 0 6px;
}
.tool li:hover {
  background-color: #f5f7fb;
  cursor: pointer;
}
.addClass {
  /* color: #f87a23;
  background-color: #f87a23; */
  /* opacity: 0.5; */
}
/* 滚动条 */
::-webkit-scrollbar {
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
}
</style>
